<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from "vue";
import { proTitle } from '../../../baseUrl'
import { newDateFn, isMobile } from "@/utils/index";
// import data from "/public/data.json";
import DataUps from "@/components/DataUps/index.vue";
import { Search } from '@element-plus/icons-vue'
import useDemoStore from '@/store/common.ts'

import { getData } from "@/api/index.ts"

const demoStore = useDemoStore()


const tableHeader = ref([
  "公司", "批额", "放款", "周期", "评分", "状态"
])

const title = ref("")
const fkData = ref([])
const copyfkData = ref([])

const time = ref(newDateFn())

const searchVal = ref("")

const isScreen = ref(true)

onBeforeMount(() => {
  getData().then((res: any) => {
    console.log(res)
    if (res.code == 200) {
      title.value = res.title
      fkData.value = res.data
      copyfkData.value = JSON.parse(JSON.stringify(res.data))
    } else {
      fkData.value = []
      console.log("数据获取失败！")
    }
  })
})

onMounted(() => {
  setInterval(() => {
    time.value = newDateFn()
  }, 1000)
})

// 搜索
const search = () => {
  let filteredData: any[] = [];
  if (searchVal.value) {
    // 循环便利过滤数据
    fkData.value.forEach((category: any) => {
      const filteredList = category.list.filter((item: any) => item.name.includes(searchVal.value));
      if (filteredList.length > 0) {
        filteredData.push({
          title: category.title,
          list: filteredList
        });
      } else {
        filteredData.push({
          title: category.title,
          list: []
        });
      }
    });

    fkData.value = filteredData;
  } else {
    fkData.value = copyfkData.value
  }
  console.log(searchVal.value, filteredData);
}

const rotate = () => {
  isScreen.value = !isScreen.value
  demoStore.increment(isScreen.value)
}

</script>

<template>
  <div class="wrap">
    <div v-if="isMobile()" class="tigger-rotate" @click="rotate"><img src="/src/assets/rotate.png" alt=""></div>  
    <div class="header" :style="{ fontSize: isMobile() ? '5vw' : '40px', height: isMobile() ? '70px' : '90px' }">
      <div class="title">{{ proTitle }}</div>
    </div>
    <div :class="isMobile() &&  isScreen? 'time-search-mobile' : 'time-search'">
      <div class="time" :style="{ fontSize: isMobile() ? '5vw' : '18px', height: isMobile() ? '40px' : '50px', left: isMobile() && !isScreen ? '0' : 'unset', width: isScreen ? '100%' : 'unset', textIndent: isMobile() && isScreen ? 'unset' : '20px' }">北京时间：{{
      time }}</div>
      <div class="search">
        <el-icon>
          <Search />
        </el-icon>
        <input class="search-input" v-model="searchVal" type="text" placeholder="请输入名称" @change="search">
      </div>
    </div>
    <div v-if="fkData && !isMobile()" class="content">
      <el-row class="content-row" :gutter="30">
        <el-col class="content-col" :span="12">
          <DataUps :title="fkData[0].title" :tableHeader="tableHeader" :data="fkData[0].list" />
        </el-col>
        <el-col class="content-col" :span="12">
          <DataUps :title="fkData[1].title" :tableHeader="tableHeader" :data="fkData[1].list" />
        </el-col>
      </el-row>
      <el-row class="content-row" :gutter="30">
        <el-col class="content-col" :span="12">
          <DataUps :title="fkData[2].title" :tableHeader="tableHeader" :data="fkData[2].list" />
        </el-col>
        <el-col class="content-col" :span="12">
          <DataUps :title="fkData[3].title" :tableHeader="tableHeader" :data="fkData[3].list" />
        </el-col>
      </el-row>
    </div>
    <div v-if="fkData && isMobile()" class="phone-content" :style="{marginTop: isMobile() && !isScreen ? '40px' : 'unset'}">
      <el-row class="content-row">
        <el-col class="content-col" :span="24">
          <DataUps :title="fkData[0].title" :tableHeader="tableHeader" :data="fkData[0].list" />
        </el-col>
      </el-row>
      <el-row class="content-row">
        <el-col class="content-col" :span="24">
          <DataUps :title="fkData[1].title" :tableHeader="tableHeader" :data="fkData[1].list" />
        </el-col>
      </el-row>
      <el-row class="content-row">
        <el-col class="content-col" :span="24">
          <DataUps :title="fkData[2].title" :tableHeader="tableHeader" :data="fkData[2].list" />
        </el-col>
      </el-row>
      <el-row class="content-row">
        <el-col class="content-col" :span="24">
          <DataUps :title="fkData[3].title" :tableHeader="tableHeader" :data="fkData[3].list" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use "./index.scss";
</style>